<script lang="ts" setup>
import { ref } from 'vue'
import { loginAPI } from 'src/api'
import { useAuthStore } from 'stores/authStore'
import { storeToRefs } from 'pinia'

const loginForm = ref({
  username: '',
  password: '',
})
const { showLoginDialog } = storeToRefs(useAuthStore())
// TODO:登陆
async function login() {
  console.log('login...')
  await loginAPI(loginForm.value.username, loginForm.value.password)
  showLoginDialog.value = false
}
</script>

<template>
  <div class="login-container">
    <div class="part">
      <span class="logo" style="font-size: 3em">小橙书</span>
      <span class="description">徽程人的生活空间</span>
      <img
        draggable="false"
        src="~assets/img/orange.svg"
        width="250"
        height="250"
      />
    </div>
    <q-separator vertical size=".1px" />
    <div class="part">
      <span class="logo" style="font-size: 2.5em; margin-bottom: 20px"
        >安徽工程大学</span
      >

      <q-input
        class="login-input"
        type="text"
        label="账号"
        maxlength="10"
        v-model="loginForm.username"
      />
      <q-input
        class="login-input"
        type="password"
        label="密码"
        maxlength="16"
        v-model="loginForm.password"
      />
      <q-btn
        class="login-button"
        size="1rem"
        rounded
        color="primary"
        label="登陆"
        :disable="!(loginForm.username && loginForm.password)"
        @click="login"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  @include flex;
  background-color: white;
  padding-bottom: 40px;
}

.login-input {
  width: 250px;
  margin-bottom: 15px;
}

.login-button {
  width: 250px;
  margin-bottom: 50px;
}

.description {
  font-family: DingDing;
  font-size: 1.1em;
}

.part {
  width: 400px;
  height: 400px;
  @include flex($direction: column);
}
</style>
